<template>
  
      <!-- 原生回到顶部 -->
    <!-- <div class="returnTop" @click="returnTop" v-show="isShow">
      <i class="el-icon-arrow-up" style="font-size:30px"></i>
    </div> -->

    <!-- el组件回到顶部 -->
    <el-backtop target="#app" :right="30" :bottom="60" :visibility-height="800">
      <i class="el-icon-arrow-up" style="font-size:30px"></i>
    </el-backtop>
  
</template>

<script>
export default {
  methods:{
    returnTop(){
      document.documentElement.scrollTop=0
    },
    handleScroll() {
            this.screenHeight = document.documentElement.scrollTop || document.body.scrollTop;
      },
  },
  computed:{
    isShow(){
      if( this.screenHeight>1000){
        return true
      }else{
        return false
      }
    }
  },
  mounted() {
        window.addEventListener('scroll', this.handleScroll)
    },
  destroyed() {
　　　　window.removeEventListener('scroll', this.handleScroll); // 销毁监听
　　}  
}

</script>
<style scoped>
/* pc端样式 */
@media screen and (min-width: 1200px) {
    .returnTop,.el-backtop{
      width: 50px;
      height: 50px;
      position: fixed;
      right:30px;
      bottom:60px;
      border: 1px solid #aaa;
      text-align: center;
      line-height: 50px;
      border-radius: 20%;
    }
    .returnTop,.el-backtop:hover{
       cursor: pointer;
       transition: 0.8s;
       box-shadow: 0 4px 8px 6px rgba(7, 17, 27, 0.2);
       transform: scale(1.05);
    }
}

/* 移动端样式 */
@media screen and (max-width: 768px) {
    .returnTop,.el-backtop{
      width: 40px;
      height: 40px;
      position: fixed;
      right:10px;
      bottom:30px;
      border: 1px solid #aaa;
      text-align: center;
      line-height: 50px;
      border-radius: 20%;
      z-index: 99;
    }
}
</style>